<template>
  <!--  这里有一个bug template读取script的优先级比onMounted优先级高
  读取出来的currentCommodity内容与预料中的不一样-->
  <div class="CommodityInfo">
    <!--    <span>this is {{currentCommodity}}</span>-->
    <span class="introdoction">
      <p style="margin-bottom: 0;margin-left: 34vh">{{commodityInfo.intro_zh}}</p>
      <p style="margin-bottom: 0;margin-top: 0;margin-left: 30vh">{{commodityInfo.intro_ja}}</p>
    </span>
    <div class="information">
      <div class="block text-center" m="t-4">
        <span class="txt1" style="font-size: 2vw;font-weight: bold;margin-top: 0;margin-bottom: 0;padding-left: 0;">
          [商品详情]
        </span>
        <el-carousel trigger="click" height="50vh">
          <el-carousel-item v-for="item in carouselImgList" :key="item" class="carousel-item">
            <!--            <h3 class="small justify-center" text="2xl">{{ item }}</h3>-->
            <img :src="item.url" style="width: 100%;height: auto">
          </el-carousel-item>
        </el-carousel>
        <span class="txt2">
          <p style="margin: 0;">{{commodityInfo.height}}</p>
          <p style="margin: 0;">{{commodityInfo.outside_diameter}}</p>
          <p style="margin: 0;">{{commodityInfo.bamboo_cover_diameter}}</p>
        </span>
      </div>

      <div class="container2">
        <span style="font-weight: bold;font-size: 3vw;margin-bottom: 3vh">{{currentCommodity}}&ensp;&ensp;汝瓷</span>
        <span style="font-size: 2.5vw;font-weight: bold;margin-bottom: 3vh">价格：￥10000</span>
        <div class="inner-container2">
          <span style="font-size: 2.5vw;font-weight: bold;margin-bottom: 3vh">
            数量:
          </span>
          <el-button class="button" type="danger" :icon="Delete" @click="deleteCount" circle />
          <span style="font-size: 2.5vw;font-weight: bold;margin-bottom: 3vh;margin-top: 0.5vh">
            {{commodityCount}}
          </span>
          <el-button class="button" type="success" :icon="Plus" @click="addCount" circle />
          <span style="font-size: 2.5vw;font-weight: bold;margin-bottom: 3vh">
            件
          </span>
        </div>
        <span style="font-size: 2.5vw;font-weight: bold;margin-bottom: 3vh">配送方式：海外快递</span>
        <div class="inner-container3">
          <div>
            <el-button type="success">加入购物车</el-button>
          </div>
          <div style="margin-left: 16vh">
            <el-button type="primary">立即购买</el-button>
          </div>
        </div>

      </div>
    </div>

  </div>

</template>

<script setup lang="ts">
import bus from '../bus';
import { ref, onMounted, onBeforeMount, defineExpose } from 'vue'
import {Plus, Delete} from '@element-plus/icons-vue'

let currentCommodity = ref('青叶')
let commodityCount = 0
let commodityInfo = {
  intro_zh:'“须臾照见万世长，一叶便知天下秋。”',
  intro_ja:'「刹那の光は世を照らし、一葉にて秋を知る。」',
  height:'全高：80士2mm',
  outside_diameter:'身外直径：208士2mm',
  bamboo_cover_diameter:'竹盖直径：50士2mm',
  url1:'@/assets/images/青叶img.png',
  url2:'@/assets/images/青叶轮播.png',
}

let carouselImgList = [
  {url:require('@/assets/images/青叶img.png')},
  {url:require('@/assets/images/青叶轮播.png')},
]

const addCount = () => {
  commodityCount+=1
}

const deleteCount = () => {
  commodityCount-=1
}

bus.on("choseCommodity", (data) => {
  currentCommodity.value = data
  console.log(data)
});

onBeforeMount(() => {
  console.log('onBeforeMount')
  bus.on("choseCommodity", (data) => {
    currentCommodity.value = data
    console.log(data)
  });
  if(currentCommodity.value === '樱花'){
    commodityInfo = {
      intro_zh:'“即使被春风吹动，樱花依然盛开。”',
      intro_ja:'「春风に 动かされても なおさくら」',
      height:'全高：120士2mm',
      outside_diameter:'身外直径：100士2mm',
      bamboo_cover_diameter:'竹盖直径：85士2mm',
      url1:'@/assets/images/樱花img.jpg',
      url2:'@/assets/images/樱花轮播.png',
    }
    carouselImgList[0].url = commodityInfo.url1
    carouselImgList[1].url = commodityInfo.url2
  }else if(currentCommodity.value === '青竹'){
    commodityInfo = {
      intro_zh:'“一身青翠冲天立，深深扎根泥土中”',
      intro_ja:'「光る地面に竹が生え，青竹が生え」',
      height:'全高：160士2mm',
      outside_diameter:'身外直径：120士2mm',
      bamboo_cover_diameter:'竹盖直径：100士2mm',
      url1:'@/assets/images/青竹img.png',
      url2:'@/assets/images/青竹轮播.png',
    }
    carouselImgList[0].url = commodityInfo.url1
    carouselImgList[1].url = commodityInfo.url2
  }
})

onMounted(async() => {
  console.log('onMounted')
  bus.on("choseCommodity", (data) => {
    currentCommodity.value = data
    console.log(data)
  });
  if(currentCommodity.value === '樱花'){
    commodityInfo = {
      intro_zh:'“即使被春风吹动，樱花依然盛开。”',
      intro_ja:'「春风に 动かされても なおさくら」',
      height:'全高：120士2mm',
      outside_diameter:'身外直径：100士2mm',
      bamboo_cover_diameter:'竹盖直径：85士2mm',
      url1:'@/assets/images/樱花img.jpg',
      url2:'@/assets/images/樱花轮播.png',
    }
    carouselImgList[0].url = commodityInfo.url1
    carouselImgList[1].url = commodityInfo.url2
  }else if(currentCommodity.value === '青竹'){
    commodityInfo = {
      intro_zh:'“一身青翠冲天立，深深扎根泥土中”',
      intro_ja:'「光る地面に竹が生え，青竹が生え」',
      height:'全高：160士2mm',
      outside_diameter:'身外直径：120士2mm',
      bamboo_cover_diameter:'竹盖直径：100士2mm',
      url1:'@/assets/images/青竹img.png',
      url2:'@/assets/images/青竹轮播.png',
    }
    carouselImgList[0].url = commodityInfo.url1
    carouselImgList[1].url = commodityInfo.url2
  }
});

defineExpose({ currentCommodity }); // 将 currentCommodity 暴露给模板使用

</script>

<style scoped>
.CommodityInfo{
  display: flex;
  flex-direction: column;
  position: center;
  height: 100vh;
}

.introdoction{
  font-weight: bolder;
  font-size: 3vw;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.information{
  display: flex;
  flex-direction:row;
  /*position: center;*/
}

.txt1{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.txt2{
  margin: 0;
  font-weight: bolder;
  font-size: 1.5vw;
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section {
  height: 100vh;
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: black;
  text-align: center;
  /* font-size: 24px; */
  font-weight: bold;
  width: 100%;
  position: relative;
  font-family: '岩田仿宋', serif;
}

.block{
  margin-top: 5vh;
  margin-left: 35vh;
  width: 30%;
  height: 50vh;
}

.carousel-item{
  height: 50vh;
}

.container2{
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin-top: 10vh;
  margin-left: 5vh;
}

.inner-container2{
  display: flex;
  flex-direction: row;
}

.button{
  margin: 1vh;
}

.inner-container3{
  display: flex;
  flex-direction: row;
}
</style>